<template>
  <div>
    <a-button type="primary" style="margin-top: 20px" @click="editModal(0)">新建</a-button>
    <div style="margin-top: 20px">
      <a-table ref="table" :pagination="false" :columns="columns" :data-source="data" rowKey="id">
      <span slot="state" slot-scope="state">
      <a-tag :color="state === -1? 'red' : 'cyan'">
        {{ state === -1 ? '禁用' : '使用中' }}
      </a-tag>
    </span>
        <span slot="action" slot-scope="text, record">
      <a-button type="primary" icon="edit" size="small" @click="editModal(record)"></a-button>
      <a-divider type="vertical" />
      <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      更多 <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <a href="javascript:;">禁用</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
    </span>
      </a-table>
      <div style="margin-top: 20px;text-align: center">
        <a-pagination v-model="current" :page-size="pageSize" :total="total" @change="changePage" />
      </div>
    </div>
    <div>
      <a-modal v-model="visible" title="添加菜单" @ok="handleOk">
        <a-form :form="form">

          <a-form-item>
            <a-input v-if="mdl.id > 0" v-decorator="['id', { initialValue: mdl.id } ]" hidden />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="菜单名称">
            <a-input
              v-decorator="['name',{ initialValue: mdl.name },{rules: [{required: true,message: '请填写菜单名称'}]}]" />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="父级菜单"
          >
            <a-select v-decorator="['parentId',{initialValue: mdl.parentId}]" @change="selectMenuChange">
              <a-select-option :value="0">请选择父级菜单</a-select-option>
              <a-select-option :value="item.id" v-for="(item, index) in parentMenu" :key="index">{{ item.name }}</a-select-option>

            </a-select>
          </a-form-item>

          <a-form-item
            v-if="childrenMenu || mdl.type ===1"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="菜单地址">
            <a-input
              v-decorator="['url',{ initialValue: mdl.url },{rules: [{required: true,message: '请填写菜菜单地址'}]}]" />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="菜单icon">
            <a-input
              v-decorator="['icon',{ initialValue: mdl.icon }]" />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="类型"
          >
            <a-select v-decorator="['type', {initialValue: mdl.type}]">
              <a-select-option :value="1">菜单</a-select-option>
              <a-select-option :value="2">按钮</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="是否启用"
          >
            <a-radio-group v-decorator="['state', { initialValue: mdl.state}]">
              <a-radio :value="1">
                启用
              </a-radio>
              <a-radio :value="-1">
                禁用
              </a-radio>
            </a-radio-group>
          </a-form-item>

        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
  import { getMenuList, saveUpdateMenu } from "../../api/system";
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '地址',
      dataIndex: 'url',
      key: 'url',
    },
    {
      title: '排序',
      key: 'orderNum',
      dataIndex: 'orderNum',
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
      scopedSlots: { customRender: 'state' },
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' },
    },
  ];
  export default {
    name:'menuList',
    data() {
      return {
        visible:false,
        data: [],
        columns,
        current: 1,
        pageSize: 100,
        total: 0,
        mdl: {
          parentId: 0,
          name: '',
          url: '',
          type: 0,
          state: 1
        },
        form: '',
        parentMenu: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        },
        childrenMenu: false
      };
    },
    mounted() {
      this.getMenuPageData()
    },
    methods: {
      changePage() {
        this.data = []
        this.getMenuPageData()
      },
      async getMenuPageData() {
        let params = {
          pageNo: this.current,
          pageSize: this.pageSize
        }
        const result = await getMenuList(params)
        const pageInfo = result.data.page
        this.data = pageInfo.list
        this.total = pageInfo.totalPage
      },
      editModal(record) {
        this.mdl = Object.assign({}, (record === 0 ? this.mdl : record))
        this.form = this.$form.createForm(this)
        this.getParentMenu()
        this.visible = true
      },
      selectMenuChange(value) {
        if (value && value > 0) {
          this.childrenMenu = true
        } else {
          this.childrenMenu = false
        }
      },
      handleOk() {
        this.form.validateFields(async (err, values) => {
          const result = await saveUpdateMenu(values)
          if (result.code > 0) {
            this.$ms('保存成功')
            this.form = this.$form.createForm(this)
            this.visible = false
            this.getMenuPageData()
          } else {
            this.$me(result.message)
          }
        })
      },
      // 父级
      async getParentMenu () {
        const result = await getMenuList({pageNo:1,pageSize:this.pageSize,parentId: 0})
        const pageInfo = result.data.page
        this.parentMenu = pageInfo.list
      },
    }
  }
</script>

<style scoped>

</style>
